CSS - Como colocar sombra em boxes ( divs )
Nota : Se não tiver texto na div não exibe nada.

Uma sombra sólida simples e muito destacada do box

<div class="sombra1">sombra1</div>
sombra1



Uma sombra sólida com bordas achatadas e muito destacada do box

<div class="sombra1 bordasachatadas1">sombra1 e bordasachatadas1</div>
sombra1 e bordasachatadas1



Uma sombra realmente sombreada com bordas achatadas

<div class="sombra2 bordasachatadas1">sombra2 e bordasachatadas1</div>
sombra2 e bordasachatadas1



Uma sombra realmente sombreada com bordas achatadas sendo a sombra bem maior que a imagem

<div class="sombra3 bordasachatadas1">sombra3 e bordasachatadas1</div>

sombra3 e bordasachatadas1



Uma sombra interna ao próprio elemento

<div class="sombra4 bordasachatadas1">sombra4 e bordasachatadas1</div>
sombra4 e bordasachatadas1





Estilos utilizados por esta página:
    <style>
        .bordasachatadas1 {
            border-radius: 10px;
        }

        .sombra1 { /* normal */
            box-shadow: 20px 20px black;
            background-color: aquamarine;
            width: 150px;
            height: 150px;
        }

        .sombra2 { /* com blur*/
            box-shadow: 20px 20px 20px black;
            background-color: azure;
            width: 150px;
            height: 150px;
        }

        .sombra3 { /* sombra maior que a figura original*/
            box-shadow: 20px 20px 20px 30px black;
            background-color: azure;
            width: 150px;
            height: 150px;
        }

        .sombra4 { /* sombra interna ao elemento*/
            box-shadow: inset 0 0 40px black;
            background-color: azure;
            width: 150px;
            height: 150px;
        }
    </style>